<template>
	<view class="content">
		<view class="upper">
			<image :src="imgUrl + '/static/images/kjwosi.png'" mode=""></image>
		</view>
		<!-- swiperone -->
		<view class="swiper_box">
			<view style="height: 30px"></view>
			<swiper class="swiper" :autoplay="false" :previous-margin="swiper.margin" :next-margin="swiper.margin" :circular="false" @change="upperSwiperChanged">
				<swiper-item v-for="(item, index) in swiper.list" :key="index">
					<image class="le-img" :src="imgUrl + item" :class="{ 'le-active': swiper.index == index }"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- swiperone -->
		<!-- swipertow -->
		<view class="swipertow">
			<view v-for="(item, index) in descriptions" :key="index" @click="handleClick(item.action)" v-show="currentIndex === index">
				<image class="image" :src="imgUrl + item.Image" mode=""></image>
			</view>
		</view>
		<realname v-if="isDialogVisible" @closeDialog="closeDialog"></realname>
		<!-- swipertow -->
	</view>
</template>

<script>
import config from '@/config';
import { getUserAdmin } from '@/utils/auth.js';
import realname from '../../components/real/realname.vue';
export default {
	components: {
		realname
	},
	data() {
		return {
			isDialogVisible: false,
			imgUrl: config.gillUrl,
			currentIndex: 0, // 记录当前点击的项的索引
			swiper: {
				index: 0,
				margin: '100rpx',
				list: [
					'/static/images/duckmessnge/duckone.png',
					'/static/images/duckmessnge/ducktow.png',
					'/static/images/duckmessnge/duckthree.png',
					'/static/images/duckmessnge/ducksix.png',
					'/static/images/duckmessnge/uio.png',
					'/static/images/duckmessnge/ducklpm.png',
					'/static/images/duckmessnge/duckbnm.png',
					'/static/images/duckmessnge/duckjhg.png'
				]
			},
			descriptions: [
				{
					Image: '/static/images/duckmessnge/moniuiu.png',
					action: 'Crazy'
				},
				{
					Image: '/static/images/duckmessnge/monjiji.png',
					action: 'breeding'
				},
				{
					Image: '/static/images/duckmessnge/lkfkodsmv.png',
					action: 'public'
				},
				{
					Image: '/static/images/duckmessnge/sdfjhv.png',
					action: 'public'
				},
				{
					Image: '/static/images/duckmessnge/yaya.png',
					action: 'public'
				},
				{
					Image: '/static/images/duckmessnge/leitai.png',
					action: 'public'
				},
				{
					Image: '/static/images/duckmessnge/tannan.png',
					action: 'public'
				},
				{
					Image: '/static/images/duckmessnge/huixing.png',
					action: 'public'
				}
			]
		};
	},
	methods: {
		upperSwiperChanged(e) {
			this.currentIndex = e.detail.current;
			this.swiper.index = e.detail.current;
		},
		async handleClick(methodName) {
			let userDetail = await getUserAdmin();
			if (userDetail.isRealName !== 1) {
				this.isDialogVisible = true;
			} else {
				if (this[methodName]) {
					this[methodName]();
				} else {
					console.log(` 没有 "${methodName}" 这一项.`);
				}
			}
		},
		closeDialog() {
			this.isDialogVisible = false;
		},
		Crazy() {
			uni.navigateTo({
				url: '/pages/breeding/crazyDetail'
			});
		},
		breeding() {
			uni.navigateTo({
				url: '/pages/breeding/breeding' //繁育
			});
		},
		public() {
			this.$modal.showToast('暂未开放');
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	padding: 140.12rpx 0 0;
	.upper {
		width: 680rpx;
		height: 185rpx;
		margin: 0 34.88rpx 30rpx;
		border-radius: 17rpx;
		image {
			width: 680rpx;
			height: 185rpx;
		}
	}
	.swiper_box {
		width: 100%;
		height: 710rpx;
		margin-left: 10rpx;
		.swiper {
			height: 100%;
			.le-img {
				width: 538.95rpx;
				height: 701.16rpx;
				transform: scale(0.9);
				transition: transform 0.3s ease-in-out 0s;

				&.le-active {
					transform: scale(1);
				}
			}
		}
	}
	.swipertow {
		width: 710rpx;
		height: 350rpx;
		text-align: center;
		line-height: 207rpx;
		border-radius: 45rpx;
		margin: 80rpx 28rpx 0;
		.image {
			width: 701rpx;
			height: 323rpx;
		}
	}
}
</style>
